<template>
  <div class="card">
    <chart ref="chart" :data="data" />
  </div>
</template>

<script>
import chart from './chart'
import { getNodes, getLines } from '@/api/center'

export default {
  components: {
    chart
  },
  data() {
    return {
      data: {}
    }
  },
  created() {
    getNodes().then(res1 => {
      getLines().then(res2 => {
        this.getData(res1.data, res2.data)
      })
    })
  },
  methods: {
    getColor(i) {
      // 绿 黄 红
      const colors = ['#5bad5c', '#F9F900', '#FF2D2D']
      return colors[i]
    },
    getDerection(derection, i, j) {
      var data = []
      data[0] = derection == 1 ? i : derection == 2 ? j : 0
      data[1] = data[0] == i ? j : i
      return data
    },
    getData(nodeDatas, lineDatas) {
      const nodes = [
        {
          index: 0,
          nodeName: 'T0',
          value: [334, 970], // 坐标
          svgPath:
            'M781.186088 616.031873q17.338645 80.573705 30.59761 145.848606 6.119522 27.537849 11.219124 55.075697t9.689243 49.976096 7.649402 38.247012 4.079681 19.888446q3.059761 20.398406-9.179283 27.027888t-27.537849 6.629482q-5.099602 0-14.788845-3.569721t-14.788845-5.609562l-266.199203-155.027888q-72.414343 42.836653-131.569721 76.494024-25.498008 14.278884-50.486056 28.557769t-45.386454 26.517928-35.187251 20.398406-19.888446 10.199203q-10.199203 5.099602-20.908367 3.569721t-19.378486-7.649402-12.749004-14.788845-2.039841-17.848606q1.01992-4.079681 5.099602-19.888446t9.179283-37.737052 11.729084-48.446215 13.768924-54.055777q15.298805-63.23506 34.677291-142.788845-60.175299-52.015936-108.111554-92.812749-20.398406-17.338645-40.286853-34.167331t-35.697211-30.59761-26.007968-22.438247-11.219124-9.689243q-12.239044-11.219124-20.908367-24.988048t-6.629482-28.047809 11.219124-22.438247 20.398406-10.199203l315.155378-28.557769 117.290837-273.338645q6.119522-16.318725 17.338645-28.047809t30.59761-11.729084q10.199203 0 17.848606 4.589641t12.749004 10.709163 8.669323 12.239044 5.609562 10.199203l114.231076 273.338645 315.155378 29.577689q20.398406 5.099602 28.557769 12.239044t8.159363 22.438247q0 14.278884-8.669323 24.988048t-21.928287 26.007968z',
          symbolSize: 20
        },
        {
          index: 1,
          nodeName: 'T1',
          value: [485, 834],
          symbol: 'circle'
        },
        {
          index: 2,
          nodeName: 'T2',
          value: [298, 761],
          symbol: 'circle'
        },
        {
          index: 3,
          nodeName: 'T3',
          value: [222, 733],
          symbol: 'circle'
        },
        {
          index: 4,
          nodeName: 'T4',
          value: [145, 685],
          symbol: 'circle'
        },
        {
          index: 5,
          nodeName: 'T5',
          value: [178, 502],
          symbol: 'circle'
        },
        {
          index: 6,
          nodeName: 'T6',
          value: [472, 600],
          symbol: 'circle'
        },
        {
          index: 7,
          nodeName: 'T7',
          value: [342, 546],
          symbol: 'circle'
        },
        {
          index: 8,
          nodeName: 'T8',
          value: [265, 496],
          symbol: 'circle'
        },
        {
          index: 9,
          nodeName: 'T9',
          value: [291, 415],
          symbol: 'circle'
        },
        {
          index: 10,
          nodeName: 'T10',
          value: [286, 380],
          symbol: 'circle'
        },
        {
          index: 11,
          nodeName: 'T11',
          value: [390, 322],
          symbol: 'circle'
        },
        {
          index: 12,
          nodeName: 'T12',
          value: [288, 199],
          symbol: 'circle'
        },
        {
          index: 13,
          nodeName: 'T13',
          value: [160, 140],
          symbol: 'circle'
        },
        {
          index: 14,
          nodeName: 'T14',
          value: [168, 108],
          symbol: 'circle'
        },
        {
          index: 15,
          nodeName: 'T15',
          value: [201, 88],
          symbol: 'circle'
        },
        {
          index: 16,
          nodeName: 'T16',
          value: [456, 208],
          symbol: 'circle'
        },
        {
          index: 17,
          nodeName: 'T17',
          value: [550, 88],
          symbol: 'circle'
        },
        {
          index: 18,
          nodeName: 'T18',
          value: [755, 104],
          symbol: 'circle'
        },
        {
          index: 19,
          nodeName: 'T19',
          value: [845, 204],
          symbol: 'circle'
        },
        {
          index: 20,
          nodeName: 'T20',
          value: [801, 279],
          symbol: 'circle'
        },
        {
          index: 21,
          nodeName: 'T21',
          value: [831, 315],
          symbol: 'circle'
        },
        {
          index: 22,
          nodeName: 'T22',
          value: [600, 542],
          symbol: 'circle'
        },
        {
          index: 23,
          nodeName: 'T23',
          value: [671, 651],
          symbol: 'circle'
        },
        {
          index: 24,
          nodeName: 'T24',
          value: [668, 802],
          symbol: 'circle'
        },
        {
          index: 25,
          nodeName: 'T25',
          value: [498, 360],
          symbol: 'circle'
        },
        {
          index: 26,
          nodeName: 'T26',
          value: [638, 274],
          symbol: 'circle'
        },
        {
          index: 27,
          nodeName: 'T27',
          value: [666, 328],
          symbol: 'circle'
        },
        {
          index: 28,
          nodeName: 'T28',
          value: [666, 416],
          symbol: 'circle'
        },
        {
          index: 29,
          nodeName: 'T29',
          value: [754, 406],
          symbol: 'circle'
        },
        {
          index: 30,
          nodeName: 'T30',
          value: [854, 473],
          symbol: 'circle'
        },
        {
          index: 31,
          nodeName: 'T31',
          value: [820, 536],
          symbol: 'circle'
        },
        {
          index: 32,
          nodeName: 'T32',
          value: [819, 615],
          symbol: 'circle'
        }
      ]
      for (var j = 0; j < nodes.length; j++) {
        nodes[j].nodeData = nodeDatas[j]
      }
      var charts = {
        nodes: [],
        linesData: []
      }
      // 遍历
      for (var j = 0; j < nodes.length; j++) {
        const { value, nodeName, svgPath, symbol } = nodes[j]
        const size = 10
        const nodeData = nodeDatas[j]
        const color = this.getColor(nodeData.color - 1)
        var node = {
          nodeName,
          value,
          symbolSize: size,
          symbol: svgPath ? 'path://' + svgPath : symbol,
          nodeData,
          itemStyle: {
            color: color
          },
          tooltip: {
            show: true,
            formatter: function (params) {
              const { data } = params
              return `节点编号：${data.nodeName}<br/>当前碳势：${data.nodeData.e} <br/>当前流入碳流：${data.nodeData.inFlow} <br/>当前流出碳流: ${data.nodeData.outFlow}`
            },
            backgroundColor: 'rgba(7, 56, 148,.9)'
          }
        }

        // 设置涟漪动画样式
        node.rippleEffect = {
          // color:'purple',  //涟漪颜色,默认为散点自身颜色
          // brushType:'fill' //动画方式,全填充或只有线条,'stroke'
          period: 4, // 动画周期
          scale:
            node.nodeData.light == 1
              ? '3'
              : node.nodeData.light == 2
              ? '4'
              : node.nodeData.light == 3
              ? '6'
              : '3', // 涟漪总大小
          brushType: 'stroke',
          number:
            node.nodeData.light == 1
              ? 3
              : node.nodeData.light == 2
              ? 4
              : node.nodeData.light == 3
              ? 6
              : 3 // 涟漪规模
        }
        charts.nodes.push(node)
      }
      for (var j = 0; j < lineDatas.length; j++) {
        const lineData = lineDatas[j]
        const derections = this.getDerection(
          lineData.derection,
          lineData.i,
          lineData.j
        )
        const node1 = nodes[derections[0]]
        const node2 = nodes[derections[1]]
        node2 = node2 == null ? node1 : node2
        var coords = [node1.value, node2.value]
        const line = {
          coords,
          from: node1.nodeName,
          to: node2.nodeName,
          lineData,
          tooltip: {
            show: true,
            formatter: function (params) {
              const { data } = params
              return `From：${data.from}<br/>To： ${data.to}<br/>碳流密度：${data.lineData.e}<br/>碳流量：${data.lineData.outFlow}`
            },
            backgroundColor: 'rgba(7, 56, 148,.9)'
          }
        }
        charts.linesData.push(line)
      }

      this.data = {
        grid: {
          top: '0%',
          left: '0%',
          right: '0%',
          bottom: '0%',
          containLabel: true
        },
        backgroundColor: 'transparent',
        tooltip: {
          trigger: 'item'
        },
        xAxis: {
          min: 0,
          max: 1000,
          show: false,
          type: 'value',
          axisPointer: {
            show: false
          }
        },
        yAxis: {
          min: 0,
          max: 1000,
          show: false,
          type: 'value',
          axisPointer: {
            show: false
          }
        },
        series: [
          {
            type: 'effectScatter',
            showEffectOn: 'render', // 'render' 绘制完成后显示特效,'emphasis' 高亮（hover）的时候显示特效
            // type: 'graph',
            // coordinateSystem: 'cartesian2d',
            label: {
              show: true,
              position: 'left',
              color: '#05b2fd',
              fontSize: 14,
              formatter: function (item) {
                return item.data.nodeName
              }
            },
            data: charts.nodes
          },
          {
            type: 'lines',
            polyline: true,
            coordinateSystem: 'cartesian2d',
            lineStyle: {
              type: 'solid',
              width: 4,
              color: '#140e8d',
              curveness: 0.3
            },
            effect: {
              show: true,
              trailLength: 0.1,
              symbol: 'arrow',
              color: '#05b2fd',
              symbolSize: 6
            },
            data: charts.linesData
          }
        ]
      }
    }
  }
}
</script>

<style lang="scss" scoped>
#index {
  .card {
    padding: 0;
    > div {
      height: calc(100% - 20px);
      border-radius: 10px;
      background: url('../../../assets/index/map01.jpg');
      background-size: 100% 100%;
      background-position: center center;
    }
  }
}
</style>
